import Taro, {useState, useEffect, useCallback, useRef} from '@tarojs/taro'
import {
  View,
  Text,
  Image,
  Icon,
  Button,
  Canvas,
  ScrollView,
  Swiper,
  Video,
  SwiperItem,
} from '@tarojs/components'
import platformLive, {IPage, ShortVideoVO} from '../../api/platform-live'
import './index.scss'

function VideoDetail() {
  const [isActive, setIsActive] = useState(0)
  const [currentIndex, setCurrentIndex] = useState(0)
  const videoRef = useRef(null)
  const [likes, setLikes] = useState(0)
  const [videoData, setVideoData] = useState({} as ShortVideoVO)
  const [videoList, setVideoList] = useState([] as IPage)
  const [index, setIndex] = useState(0)
  const getShortVideo = async () => {
    try {
      let res = await platformLive.shortVideos.showUserVideo({
        queryUserId: this.$router.params.toUserId,
        pageNo: 1,
        pageSize: 20,
      })
      console.log(res, 'res')
      setVideoData(res.records[this.$router.params.index])
      setIsActive(res.records[this.$router.params.index].likeFlag)
      setLikes(res.records[this.$router.params.index].likes)
    } catch (ex) {
      console.log(ex, 'ex')
    }
  }

  const addZan = async () => {
    try {
      // 点赞0 取消点赞1
      let isLike = isActive == 0 ? 1 : 0
      let res = await platformLive.shortVideoUserLogs.like({
        isLike: isLike,
        shortVideoId: videoData.shortVideoId,
      })
      if (res) {
        if (isActive == 0) {
          setIsActive(1)
          // 点赞 ++
          videoData.likes = videoData.likes + 1
        } else {
          // 取消点赞 --
          setIsActive(0)
          videoData.likes = videoData.likes - 1
        }
        setVideoData(videoData)
      }
    } catch (ex) {
      console.log(ex)
    }
  }

  const navigateTo = () => {
    Taro.navigateTo({
      url: `/pages/MenberHomePage/index?toUserId=${videoData.userId}`,
    })
  }

  const shareVideo = async () => {
    // try {
    // 	let res = await platformLive.shortVideoUserLogs.share({
    // 		shortVideoId: videoData.shortVideoId
    // 	})
    // 	if (res) {
    // 		Taro.showToast({
    // 			title: '转发分享成功',
    // 			icon: 'none'
    // 		})
    // 		videoData.shares++;
    // 		setVideoData(() => {
    // 			return videoData
    // 		})
    // 	} else {
    // 		Taro.showToast({
    // 			title: '转发分享失败',
    // 			icon: 'none'
    // 		})
    // 	}
    // }
  }

  useEffect(() => {
    videoRef.current = Taro.createVideoContext('kdvideo', this.$scope)
    getShortVideo()
    // setIsActive(JSON.parse(decodeURIComponent(this.$router.params.params)).likeFlag)
    // setLikes(JSON.parse(decodeURIComponent(this.$router.params.params)).likes)
  }, [])

  return (
    <View className="container_box" id="video_box">
      <View className="van_swiper">
        <View className="product_box">
          <View className="video_container">
            <Video
              id="kdvideo"
              controls={false}
              className="video_box video_cont"
              autoplay={true}
              loop={true}
              // showCenterPlayBtn={false}
              showFullscreenBtn={false}
              poster={videoData.coverUrl}
              src={videoData.videoUrl}></Video>
          </View>
          <View className="tools_right">
            <View className="tools_r_li" onClick={navigateTo}>
              <Image className="userAvater" src={videoData.userImg} />
              <View className="inviteBtn">个人主页</View>
            </View>
            <View className="tools_r_li">
              <Text
                className={
                  !isActive
                    ? 'iconfont iconlike icon_right'
                    : 'iconfont iconlike icon_right follow_active'
                }
                onClick={addZan}></Text>
              <View className="tools_r_num">{videoData.likes}</View>
            </View>
            <View className="tools_r_li" onClick={shareVideo}>
              <Button openType="share" className="shreButton">
                <Image src={require('../../assets/seeking/icon-share.png')} className="shareIcon" />
                <View className="tools_r_num">{videoData.shares}</View>
              </Button>
            </View>
            <View className="tools_r_li">
              <View className="rotate_music ">
                <Image className="rotate_img" src={videoData.userImg} />
              </View>
            </View>
          </View>
          <View className="production_box">
            <View className="production_user_title">{videoData.nickName}</View>
            <View className="production_des">{videoData.title}</View>
          </View>
        </View>

        {/* <Swiper
          id="swiper"
          className="swiper_list"
          current={currentIndex}
          vertical={true}
          onChange={e => {
            setTimeout(() => {
              videoRef.current.play()
            }, 300)
            setCurrentIndex(() => {
              console.log(e, 've')
              return e.detail.current
            })
          }}>
          {videoList.map((el, index) => {
            return (
              <SwiperItem key={`index${index}`}>
                <View className="product_box">
                  <View className="video_container">
                    <Video
                      id="kdvideo"
                      controls={false}
                      className="video_box video_cont"
                      showCenterPlayBtn={false}
                      showFullscreenBtn={false}
                      poster="https://p3.pstatp.com/large/131040001488de047292a.jpg"
                      src="http://video.microc.cn/dG1wL3d4MzkwNjg3YjY3OTZjZTMzYS5vNnpBSnMzYTJqaDJHUWRGVllDV2JhaHhjTUFzLkFaeGE2d1NIVTV3cjkyNGFlOGIyMjMxYTgwNjYyOTVhZjY2YTJjN2VjY2MwLm1wNA=="></Video>
                  </View>
                  <View className="tools_right">
                    <View className="tools_r_li">
                      <Image
                        className="userAvater"
                        src="http://img4.imgtn.bdimg.com/it/u=1694681277,1453280371&fm=26&gp=0.jpg"
                      />
                      <View className="inviteBtn">个人主页</View>
                    </View>
                    <View className="tools_r_li">
                      <Text
                        className={
                          isActive
                            ? 'iconfont iconlike icon_right'
                            : 'iconfont iconlike icon_right follow_active'
                        }
                        onClick={addZan}></Text>
                      <View className="tools_r_num">1111</View>
                    </View>
                    <View className="tools_r_li">
                      <Image
                        src={require('../../assets/seeking/icon-share.png')}
                        className="shareIcon"
                      />
                      <View className="tools_r_num">5.5w</View>
                    </View>
                    <View className="tools_r_li">
                      <View className="rotate_music ">
                        <Image
                          className="rotate_img"
                          src="http://img4.imgtn.bdimg.com/it/u=1694681277,1453280371&fm=26&gp=0.jpg"
                        />
                      </View>
                    </View>
                  </View>
                  <View className="production_box">
                    <View className="production_user_title">偷油吃下不来</View>
                    <View className="production_des">测试数据</View>
                  </View>
                </View>
              </SwiperItem>
            )
          })}
        </Swiper> */}
      </View>
    </View>
  )
}

export default VideoDetail
